import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { Tabs, WhiteSpace, Menu, Grid } from 'antd-mobile';

// style
import styles from './index.css';
import IconfontStyle from '../../../../assets/iconfont/iconfont.css';

// widget 
class CategoryBrands extends Component {
	constructor(props) {
      super(props)
      autoBind(this)
  }
  componentDidMount() {
    const { dispatch } = this.props
    dispatch({
      type: 'meyley/fetchBrandList'
    })
  }
  navBrands(brandId) {
      browserHistory.push(`/shop/${brandId}`)
  }
	render() {
    const { meyley } = this.props
	 	return (
        <div className={styles['category-brands']}>
          {
            meyley.brandList && meyley.brandList.brandList ? (
              <Grid data={meyley.brandList.brandList} columnNum={3} hasLine={false}
                renderItem={(dataItem, index) => (
                  <div onClick={this.navBrands.bind(this, dataItem.brandId)} className={styles['category-brands-item-wrap']}>
                    <div className={styles['category-brands-item']}>
                      <img src={dataItem.brandLogo} style={{ height: '0.7rem', marginBottom: '0.12rem' }} />
                      <div className={styles['category-brands-brand-name']} style={{fontSize: '0.22rem', color: 'rgb(81,81,81)'}}>
                        {dataItem.englishName}
                      </div>
                      <div className={styles['category-brands-brand-name']} style={{fontSize: '0.20rem', color: 'rgb(117,117,117)'}}>
                        {dataItem.chineseName}
                      </div>
                    </div>
                  </div>
                )} />
              ) : <span>暂无品牌数据</span>
          }
        </div>
	  	);
	}
};

CategoryBrands.propTypes = {
};

export default CategoryBrands
